<script setup>
import {ref} from "vue";
import {getusermassage,getclasses} from "@/api/article";
import useUserInfoStore from "@/sts/userinfo";
import {Delete, Edit} from "@element-plus/icons-vue";
const userinfo=useUserInfoStore();
import {ElMessage, ElMessageBox} from "element-plus";
//选择类型
const classes_s=ref({
  classesName:'',
  id:0
});
//抽屉是否显示
const drawer = ref(false)
//资源名字
const resourcesName=ref('');
//分页参数
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const total=ref(20)
//需要显示的资源数组
const resources=ref([{
  id:0,
  userId:0,
  resourcesName:'1',
  introduce:'1',
  classesId:0,
  address:'1',
  state:'1',
  classesName:'1',
  createTime:'',
  updateTime:'1',
}])
//获取用户信息
const user=ref({
  id:0,
  name:'',
  username:'',
  introduce:'',
  occupationId:'',
  jurisdiction:'',
  occName:''
})
//选择资源
const options = ref([{
  classesName:'',
  id:''
}])
//编辑资源的数据
const updatedialog=ref({
  id:0,
  userId:0,
  resourcesName:'',
  introduce:'',
  classesId:0,
  address:'',
  state:'',
  classesName:'',
  createTime:'',
  updateTime:'',
})
//新增资源
const newupdate=ref({
  id:0,
  userId:0,
  resourcesName:'',
  introduce:'',
  classesId:0,
  classesName:'',
  address:'',
  state:'',
})

//资源状态选择
const state=ref([
    {
  state:'私有'
    },
  {
    state: '开源'
  }
])
//弹窗显示
const dialogVisible=ref(false);
//获取用户信息
const usermassage=async ()=>{
  let result=await getusermassage(userinfo.info);
  user.value=result.data;
  await getclassesService();
}
usermassage();
//获取资源种类列表
const getclassesService=async ()=>{
  let result=await getclasses(user.value.occupationId);
  options.value=result.data;
  await getresourcesService();
}
//获取所有资源
import {getallresources, deleteresource, updateresources, AddResources} from "@/api/resources";
const getresourcesService=async ()=>{
  //console.log(currentPage4,pageSize4,user.value.id,classes.value.id,resourcesName.value);
  if(classes_s.value.classesName!==''){
    for (const tem of options.value){
      if(classes_s.value.classesName===tem.classesName)
        classes_s.value.id=tem.id;
    }
  }
  let result=await getallresources(currentPage4.value,pageSize4.value,user.value.id,resourcesName.value,classes_s.value.id);
  //总条数
  total.value=result.data.total;
  resources.value=result.data.rows;
  //分页查询
}
//清空按钮
const removeSelect=async ()=>{
  resourcesName.value='';
  classes_s.value.classesName='';
  classes_s.value.id=0;
  await getresourcesService();
}
//删除资源
const DeleteResourceService=async (row)=>{
  console.log(row);
  ElMessageBox.confirm(
      '你确认要删除该资源吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //调用接口
        let result = await deleteresource(row.id);
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //刷新列表
        await getresourcesService();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '用户取消了删除',
        })
      })
}
//显示编辑资源的显示框
const UpdateResourcesDialog=(row)=>{
  //console.log(row);
  dialogVisible.value=true;
  updatedialog.value=row;
  updatedialog.value.userId=user.value.id;
  for(const tem of options.value) {
    if(classes_s.value.classesName===tem.classesName)
      classes_s.value.id=tem.id;
  }
}
//编辑资源
const UpdateResourcesService=async ()=>{
  for(const tem of options.value) {
    if(classes_s.value.classesName===tem.classesName)
      classes_s.value.id=tem.id;
  }
  console.log(updatedialog.value.introduce);
  if(updatedialog.value.resourcesName===''){
    ElMessage.error("资源名称不能为空");
    dialogVisible.value=false;
  }
  else{
    console.log(updatedialog.value)
    await updateresources(updatedialog.value);
    ElMessage.success("修改成功");
    //刷新列表
    await getresourcesService();
    dialogVisible.value=false;
  }
}
//判断操作按钮是否禁用
const judgeDisable=(row)=>{
  if(row.state==="他人")return true;
  else return false;
}
//点击取消按钮之后所有添加信息清空
const clearTheMessage=()=>{
  newupdate.value.resourcesName='';
  newupdate.value.introduce='';
  newupdate.value.classesName='';
  newupdate.value.state='';
  newupdate.value.address='';
}
//添加资源
const AddResourcesService=async ()=>{
  console.log(newupdate.value);
  if(newupdate.value.state===''||newupdate.value.classesName===''||newupdate.value.address===''||newupdate.value.resourcesName==='') {
    ElMessage.error("输入不正确")
  }
  else{
    for (const tem of options.value) {
      if(newupdate.value.classesName===tem.classesName)
        newupdate.value.classesId=tem.id;
    }
    newupdate.value.userId=user.value.id;
    await AddResources(newupdate.value);
    ElMessage.success("添加资源成功");
    await getresourcesService();
    clearTheMessage();
  }
}



</script>

<template>
  <el-card class="box-card">
    <el-input v-model="resourcesName" placeholder="输入资源名称" size="large" class="input"/>
    <el-select v-model="classes_s.classesName"  placeholder="请选择资源类型" size="large" class="flex-form">
      <el-option
          v-for="item in options"
          :key="item.classesName"
          :label="item.classesName"
          :value="item.classesName"
      />
    </el-select>
    <el-button type="primary" class="hear-button" @click="getresourcesService">查询</el-button>
    <el-button class="hear-button" @click="removeSelect">清空</el-button>
    <el-button type="danger" class="add" @click="drawer=true">添加资源</el-button>
    <el-table :data="resources" style="width: 100%" border>
      <el-table-column prop="resourcesName" label="资源名称"/>
      <el-table-column prop="classesName" label="资源类型"/>
      <el-table-column prop="introduce" label="资源介绍"/>
      <el-table-column prop="address" label="资源地址">
      <template #default="{ row }">
        <el-link type="primary" :href="row.address" target="_blank">资源地址</el-link>
      </template>
      </el-table-column>
      <el-table-column prop="state" label="状态"/>
      <el-table-column prop="updateTime" label="时间"/>
      <el-table-column label="操作">
        <template #default="{ row }">
        <el-button type="primary" :icon="Edit" circle @click="UpdateResourcesDialog(row)" :disabled="judgeDisable(row)" />
        <el-button type="danger" :icon="Delete" @click="DeleteResourceService(row)" circle />
      </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 15 ,20]"
        layout="total, sizes, prev, pager, next, jumper"
        v-model:total="total"
        @current-change="getresourcesService"
    />
<!--    修改弹窗-->
    <el-dialog
        title="编辑资源"
        v-model="dialogVisible"
        width="60%"
    >
      <el-form :model="updatedialog" label-width="80px">
        <el-form-item label="资源名称">
          <el-input v-model="updatedialog.resourcesName" ></el-input>
        </el-form-item>
        <el-form-item label="资源介绍">
          <el-input v-model="updatedialog.introduce"></el-input>
        </el-form-item>
        <el-form-item label="资源类别">
          <el-select v-model="updatedialog.classesName" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.classesName"
                :label="item.classesName"
                :value="item.classesName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="资源状态">
          <el-select v-model="updatedialog.state" placeholder="请选择">
            <el-option
                v-for="item in state"
                :key="item.state"
                :label="item.state"
                :value="item.state"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span  class="dialog-footer">
        <el-button @click="dialogVisible = false;clearTheMessage">取消</el-button>
        <el-button type="primary" @click="UpdateResourcesService">确认</el-button>
      </span>
    </el-dialog>
  </el-card>
<!--  新增资源抽屉-->
  <el-drawer v-model="drawer" title="新增资源" >
    <el-form :model="newupdate" label-width="80px" >
      <el-form-item label="资源名称" class="drawer-input">
        <el-input v-model="newupdate.resourcesName" placeholder="请输入资源名称"></el-input>
      </el-form-item>
      <el-form-item label="资源介绍" class="drawer-input">
        <el-input v-model="newupdate.introduce" placeholder="请输入资源介绍"></el-input>
      </el-form-item>
      <el-form-item label="资源地址" class="drawer-input">
        <el-input v-model="newupdate.address" placeholder="请输入资源地址"></el-input>
      </el-form-item>
      <el-form-item label="资源类别" class="drawer-input">
        <el-select v-model="newupdate.classesName" placeholder="请选择资源类型">
          <el-option
              v-for="item in options"
              :key="item.classesName"
              :label="item.classesName"
              :value="item.classesName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源状态" class="drawer-input-footer">
        <el-select v-model="newupdate.state" placeholder="请选择资源状态">
          <el-option
              v-for="item in state"
              :key="item.state"
              :label="item.state"
              :value="item.state"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <span  class="drawer-footer">
      <el-button type="primary" @click="AddResourcesService">确认</el-button>
      <el-button @click="drawer=false">取消</el-button>
    </span>
</el-drawer>
</template>

<style scoped>
.box-card {
  transform: translateY(70px);
  margin-right: 100px;
  height: 600px;
}
.input{
  width: 240px;
  margin-right: 10px;
}
.hear-button{
  margin-left: 10px;
}
.add{
  float: right;
}
.drawer-input{
  margin-bottom: 40px;
}
.drawer-input-footer{
  margin-bottom: 100px;
}
</style>